<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        .box1{
            padding: 5px;
            background-color: blue;
        }
        .box2{
            padding: 5px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
   
    <div id="app">
        <a href = "http://www.atguigu.com" v-on:click="showInfo(66)">网页跳转测试</a><br/>
        <a href = "http://www.atguigu.com" v-on:click.prevent="showInfo(66)">网页跳转测试(阻止a标签默认行为)</a>

        <!--测试事件冒泡和事件捕获原理-->
        <div @click="showInfo1(72)" class="demo1">
            <button @click="showInfo1(73)">冒泡事件测试</button>
        </div>
        <!--阻止事件冒泡-->
        <div @click="showInfo1(72)" class="demo1">
            <button @click.stop="showInfo1(72)">阻止冒泡事件测试</button>
        </div>
        <!--事件只触发一次(常用);-->
        <button @click.once="showInfoOnce">按钮事件只会被触发一次</button>

        <!--使用事件的捕获模式(事件都是先捕获(由外向内)然后再冒泡，处理事件都是在冒泡阶段(由内向外)去处理的)-->
        <div class="box1" @click.capture="bubbleListen(1)"> <!--在事件捕获阶段触发执行-->
            button1
            <div class="box2" @click="bubbleListen(2)">
                button2
            </div>
        </div>

        <!--self:只有event.target是当前操作的元素是才触发事件; 这种方式才能阻止冒泡-->
        <div @click.self="eventTarget" class="demo1"> <!--div上的事件不是event.target本身不会冒泡触发-->
            <button @click="eventTarget">event.target事件本身触发</button>
        </div>
    </div>
   
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#app',
            data:function(){
                return {

                }
            },
            methods:{
                showInfo(number){
                    alert("网页跳转测试，参数值为："+number)
                },

                showInfo1(number){
                    alert("网页跳转测试，参数值为："+number)
                },

                showInfoOnce(event){
                    alert(event.target.innerText)
                    console.log(event)
                },
                bubbleListen(param){
                    console.log(param)
                    alert(param)
                },
                eventTarget(event){
                    alert(event.target);
                }
            }
        })
    </script>
     
</body>
</html>